Tim Beers-Lee (تيم برنرز لي)، بنيانگذار شبکه جهاني وب، با راه اندازي يک وب سايت در آگوست سال ????، نام خود را به عنوان نخستين طراح وب در تاريخ به ثبت رساند. او در نخستين وب سايت خود از ابرمتن (Hyperlink) و پيوندي براي ايميل استفاده کرده بود.

 

در آغاز، سايتهاي وب با کُدهاي  طراحی  ساده «اچ تي ام ال» نوشته مي شدند، گونه اي از زبان کُدنويسي که ساختار ساده اي به وب سايت ها مي داد، شامل سرتيتر و پاراگراف، و توانايي پيوند دادن به صفحه هاي وب ديگر، با اَبَرمتن. در مقايسه با روش هاي ديگر، اين راه تازه و متفاوتي بود که کاربران به سادگي مي توانستند با يک مرورگر، صفحه هاي پيوند خورده را باز کنند.

 

با پيشرفت وب و هنر طراحي آن، زبان کُد نويسي اش، اَبَرمتن يا اچ تي ام ال، پيچيده تر و پرانعطاف تر شد. ابزاري مانند جدول ها که بيشتر براي نمايش نمودارهاي داده اي بودند، بزودي مورد استفاده نادرست، براي چيدمان هاي پنهان در صفحه هاي وب قرار گرفتند. با پيدايش صفحه هاي الگوي وب يا «CSS»، روش نادرست طراحي با جدول هاي پنهان در صفحه، از گردونه خارج، و بجاي آن استفاده مناسب از صفحه هاي الگوي وب يا «CSS»، جايگزين شد.

 

فن آوري هاي يکپارچه سازي داده گاه ها (Database)، مانند زبان هاي کُدنويسي سمت سرور (Server-Side Scripting) مانند CGI, PHP, ASP.NET, ASP, JSP و ColdFusion، و استانداردهاي طراحي مدرن با الگوها (CSS)، ساختار سايت هاي وب را باز هم تغيير داده و آنرا پيشرفته تر کرده اند.

 

همچنين با آمدن نگاره هاي جاندار و فن آوري هاي پويانمايي به صفحه ها، مانند فِلَش (Flash)، چهره وب بيشتر از پيش تغيير کرد و توانمندي هاي تازه به سازندگان رسانه و طراح هاي وب داده شد، و توانايي هاي بيشتر و کارايي ها تازه مرورگرها براي html.

طراحي وب سايت 

وب سايت مجموعه اي از اطلاعات درباره موضوع و يا عنوان خاص است. طراحي يک وب سايت مشخص کننده آرايش و ساختــار صفحات وبي است که بوجود آورنده وب سايت خواهند بود. يک صفحه وب شامـــل اطلاعاتي درمورد هدف ايجــاد وب سايت ميباشد. يک وب ســايت را همــانند کتابي تصور کنيد کـه هر صفحه وب در حکم برگي از کتاب خواهد بود.

در زمينه طراحي وب سايت جنبه هاي گوناگوني بايد در نظر گرفته شود که به سبب پيشرفت روز افزون اينترنت همواره براين موارد افزوده مي شود. 

براي وب سايت هاي تجاري عمومي، موارد زير از جمله اصلي ترين آنها به شمار مي روند: 

1.طراحي سايت بر طبق عنوان و محتواي مطالب مي باشد. 

2.مطالب، جوهر کلام و اطلاعات درون سايت بايد مطابق با هدف سايت بوده و طيفي از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سايت هستند. 

3.سايت بـــايد قابل فهم بوده  طراحی  و برقـــراري ارتبــاط با آن حتي براي مخاطباني کـه آشنايي چنداني بـا وب ندارند، آســـان باشد. چنانچه سايت به اندازه کافي بزرگ بوده و اطلاعات زيادي را شامــل شود، بـايد اطلاعات راهنما را به گونه اي بکار برد که به سرعت در اختيار بيننده قرار گيرند. 

4.نماي کــار بايد کلي بوده و تمام صفحه را دربر گيرد تا بتواند پايـداري و ثبات را القــا کند. سبک نگارش بايد زيبا و تخصصي بوده و مناسب با سليقه مخاطبان و محتواي سايت باشد. 

5.در نگارش متون و اطلاعاتي که مخاطب به دنبال آنها است بايد بزرگ نمايي شود تا به بيننده القا کند که اين همان چيزي است که به دنبال آن بوده است. 

6.همچنين سايت بايد به سادگي در اينترنت يافت شود و درصورت امکان در بالاي ليست هاي جستجو قرار گيرد، اگرچه همواره اينگونه نباشد لااقل در موتورهاي جستجوي اصلي چنين شود. 

يک وب سايت معمولا شامـل متن و تصـاويـر است. اولين صفحه يک وب سـايت صفحه خانه (Home Page) و يا صفحه ايندکس (index) ناميده مي شود. بعضي از وب سايت هـــا از صفحه اي استفـــاده ميکنند کـــه معمولا صفحه خوش آمد ناميده مي شود. اين صفحه ممکن است شــامــل مواردي چون پيغــــــــــام خوش آمـدگويي، انتخاب زبـــان، انتخاب ناحيه جغرافيايي و يـا اعلام عدم پذيرش مسوليت درمــوارد خاص باشد. هر صفحه وب درون سايت وب، يک فايل HTML است که URL مخصوص به خود را دارد.

بعد از اين که هر صفحه وب ساخته شد، اين صفحات با استفاده از فهرست راهنمايي که از پيوندهاي مختلف تشکيل شده است به يکديگر متصل مي شوند.

هنگامي که يک وب ســايت کامل شد براي آنکه بـراي همه برروي اينترنت قابل مشاهده باشد بايد منتشر و يا ارسال (Upload) شود. اين کار به کمک يک ميزبان FTP انجام ميشود. هنگامي که سايت منتشر شد، مدير سايت براي افزايش بازديدکنندگان، از تکنيکهاي گونــاگون استفاده مي کند. اين کار با ثبت کردن وب سـايت در موتورهاي جستجويي نظير Google و Yahoo، تبادل لينک با وب ســايت هاي ديگر، ايجاد پيوند با وب سايتهاي مشابه و غيره امکان پذير است.

نمونه طراحي استاتيک : http:\\rohanit.com

 

تاريخچه وب سايت

 

طرح وب سايت

طرح وب به قالب نمايشي و طراحي گرافيکي صفحات موجود در وب سايت مي گويند که معرف محتوا و مطالب آن وب سـايت مي باشد. طرح وب جلوه بصـري هدف وب سايت است و اولين بخش از يک صفحه وب است که ذهن مخاطب را با خود درگير مي کند.

طراح وب با در نظر گرفتن هدف سايت و مخاطبان آن و با استفـاده از المان هاي متناسب با رويکرد سـايت و به کمک ذهن خلاق و ذوق هنري خود در بکار بردن ابعاد و رنگها، طرحي خلق مي کند که ضمن ايجـاد يکپارچگي در کليه صفحات وب سايت، نماي تکرار شونده و خسته کننده را به مخاطب القا نکند. در وب سايت بايد از الگوي ثابتي در صفحات استفاده کرد که کاربر به هنگام ديدن صفحات متوجه اين است که همه صفحات در يک سايت مشخص هستند.

Adobe Flash

Adobe Flash (سابقا Macromedia Flash) يک برنــامه ايجاد انيميشن و يــا برنامه کاربردي گرافيکي قوي است که براي سـاخت و اجرا کردن محتواي پويـــا، مطالب چند رسانه اي مــانند صدا و تصويــر و برنامه هــاي کاربردي محاوره اي بر روي وب و از طريق مرورگر (Browser) مورد استفاده قرار مي گيرد. 

فلش مــانند اغلب قــالب هــا و تــوافقنــامه هــاي اينترنتي نبوده و يک محصول تـــائيد شده از طرف ســازمــان استانداردهـا نمي باشد. فلش بسيار محدودکننده تر از قالب HTML بوده کـه به هر حال ديدن آن احتياج به يک Plugin اختصاصي دارد و با بيشتر امکانات کاربردي مرورگرهاي وب مانند دکمه Back سازگاري ندارد مگر اين که لينکي به يک صفحه HTML جديد از فــايل فلش پيوند داده شده بـــاشد که در اين صورت انيميشن صفحه قبـل بــايد از ابتدا شروع شود، تــا جائيکه محدوديتهــاي موجود ممکن است بــا توجه به اهداف طراحي وب سـايت، بي ربط بنظر برسند.

براساس آمـار 98 درصد از کاربــران وب در آمريکا برنــامه اجراي فلش را بـرروي رايــانه هاي خود نصب کرده اند و حدود 45 تا 56 درصد از آنها آخرين نسخه اين برنامه را دارند که البته نوساناتي نيز در اين آمار وجود دارد.

بسياري از طراحـان گرافيک از فلش به جهت کنترل کاملي کـه برروي هر بخش از طرح به آنها مي دهد و حرکت و روحي که به هر المان اضافه ميشود استفاده ميکنند.

برخي از طراحــــان برنــامه هــاي کاربردي به اين دليل از فلش استفــاده مي کنند که به آنهــــا اجازه ســـاخت برنــامه هائي را مي دهد که نيــازي به دوباره خواني و يـــا رفتن به صفحه جديد به ازاي هر فعل و انفعـــالي را ندارد. فلش توانائي استفاده از فونت هايي که برروي اغلب رايانه ها نصب نشده اند را دارد.

سايتهــاي بسياري وجود دارد که تمامــا در قالب فلش هستند. سايتهــاي ديگري نيز از فلش به جاي فايلهــاي تصويــري jpeg و يا gif استفـاده مي کنند، البته با قابليت حجم کمتر فايلهــاي برداري و سرعت بيشتر دريــافت فايلها.

همينطور از فلش مي توان براي جلوگيري از تکثير و يا جستجوي غير مجاز استفاده کرد.

مخالفان فلش ادعــا مي کنند که وب سايتهاي فلش طرحي کامل نداشته و اغلب داراي رابط کاربر مغشوش و غير استاندارد مي باشند. هم اکنون موتورهاي جستجو قادر به فهرست بندي فايلهـاي فلش نيستند که باعث مي شود مطالب ســايت به سادگي پيدا نشده و مورد جستجو قرار نگيرند، دليل آن اين است کـه بسيــاري از موتورهــاي جستجوگر، وب ســايتها را بــا تکيه بر متن، فهرست بندي مي کنند. البته اين قابليت وجود دارد که براي مرورگرهائي که توانائي نمايش فايلهــاي فلش را ندارند، مطالب جايگزين مشخص شود که اين مطالب به درک بهتر موتورهاي جستجوگر از سايت مي انجامد و باعث بوجود آوردن ديد بهتري از سايت مي شود.

زبــان اسکريپت نويسي فلش، Action Script ناميده مي شود و بـــه زبــان JaveScript شباهت دارد کــه البتـه ويژگي هاي مفيدي را با يکديگر ادغام نموده است. مثلا در خصوص اندازه قلم، پاسخ به رويدادهاي زمـان اجرا، امکاناتي براي افراد نابينا و بسياري ويژگيهاي ديگر.

ActionScript يک زبان شي گرا بوده که امکان استفاده از CSS ،XML و طراحي برنامه هاي کاربردي وب بر پـايه کلاس هاي ساخت يافته را در فلش به ما مي دهد.

وب سايت هاي پوياو ايستا

وب سايتهاي ايستا معمولا به وب سايتهايي گفته مي شود که صفحات آن يک بار ايجاد و تا مدت زماني تغيير نمي يابند و در صورت نياز به تغيير و بروزرساني صفحات آن معمولا اين کار پر دردسر و زمان بر است و در صورت نياز به تغيير بايستي صفحه تغيير يافته منتشر ( Upload ) گردد . 

وب سايتهاي دايناميک به وب سايتهايي گفته مي شود که در طراحي آن از زبانهاي برنامه نويسي استفاده شده است و در صورت نياز به تغيير در سايت ( ايجاد صفحه جديد ، ويرايش متون ، ايجاد پيوند و ... ) اينکار به سادگي و توسط نرم افزار نوشته شده مخصوص آن انجام مي پذيرد .

در وب سايتهاي دايناميک صفحه به پايگاه داده وصل بوده و با توجه به درخواست کاربر ( جستجو ، پيوند به صفحه و ... ) محتويات صفحات تغيير مي يابند .

روش قديمي مورد استفاده در طراحي صفحات وب (HTML)، بصورت ايستا (Static) است که بـراي تبديل آن به مطالب پويا دو روش وجود دارد:

•روش سمت سرويس دهنده (Server-side) 

•روش سمت سرويس گيرنده (Client-side) 

در روش Server-side يک سرور وب که نرم افـــزار خاصي را اجرا ميکند، يک صفحه HTML مطابق بـا درخواست کاربر و متناسب با ديگر متغيرها ايجاد مي کند.

:: زبانهاي اسکريبت نويسي متداول عبارتند از:

PHP-Perl-JSP-ColdFusion-ASP-ASP .NET-Ruby-Python

مانند دايرکتوري معروف ايراني www.yaoo.ir که آينده روشني در انتظار اين  طراحی  سايت ميباشد.هزاران ايراني 

DHTML سمت سرويس گيرنده نيز در جهت افزايش تحرک و فعل و انفعالات در صفحات وب بوجود آمده است 

تکنولوزي توليد و نوسعه صفحات دايناميک مي باشد که به سه زبان #VB, C# , J نوشته مي شود. 

ASP .NET بخشي از NET Platform. شرکت مايکروسافت و جانشين تکنولوژي قديمي تر از آن بــه نــــام ASP است. ASP .NET بر پــايــه "زبـــان مشترک زمــان اجـــرا" ساخته شده است، به اين معني که برنــامه نويســان مي توانند کــدهاي ASP .NET را بــا استفــاده از هر زبــان برنامه نويسي NET. مايکرو سافت بنويسند.

پايگاه داده (Database)

در علوم رايانه، پايگاه داده به عنوان يک مجموعه ساخت يــافته از داده ها يا اطلاعات ذخيره شده در يک رايانه تعريف مي شود. بطوريکه ميتوان آنرا براي پاسخ به درخواستها کاوش نمود.

داده هاي بازيــافت شده در جواب درخواستها، اطلاعاتي را به ما مي دهند که به عنوان نتــايج، مورد استفاده قرار مي گيرند. برنــامه کامپيوتري مورد استفــاده براي اداره کردن و جستجو نمودن يک پايگــاه داده، سيستم مديريت پايگــاه داده (DBMS) ناميده ميشود. خصوصيـات و طراحي سيستمهــاي پايگــاه داده در علم اطلاعات گنجانده شده اند.

Microsoft SQL Server يکي از انواع پايگاه داده مي باشد که از سيستم مديريت پايگاه داده رابطه اي استفاده مي کند و توليد شده توسط مايکروسافت است.

HP - PHP: Hypertext Preprocessor 

PHP يک زبان برنامه نويسي انعکاسي است که در ابتدا براي توليد صفحات وب پويا ساخته شده بود.

PHP بيشتر در اسکريپت نويسي سمت سرويس دهنده بکار ميرود. بطور کلي PHP بر روي يک سرويس دهنده وب اجــرا مي شود بطوري کــه کدهــايPHP بــه عنوان داده هاي ورودي گرفتــه شده و صفحــات وب بـه عنوان خروجي ايجــاد مي شوند، بعلاوه از PHP ميتـوان  طراحی  براي اسکريپت نويسي(Command-line) و نيـــز ايجــاد رابــط گرافيکي کاربـــر سمت سرويس گيرنده استفــاده کــرد. PHP مي تواند بر روي اکثــر سرورهــاي وب و تقريبــا هر سيستم عاملي به راحتي قرار گيرد.

همچنين گروه PHP، کد منبع کامـل خود را براي ساخت، تغيير و توسعه PHP جهت استفــاده شخصي کاربـران، در اختيار آنها قرار داده است

اين ماجرا با وجودي که بخشي از حقايق به وجود آمدن اينترنت را بيان مي کند اما نمي تواند تمام واقعيات مربوط به آن را تشريح کند. بايد بگوييم افراد مختلفي در تشکيل اينترنت سهم داشته اند آقاي “Paul Baran” يکي از مهمترين آنهاست. آقاي باران که در دوران جنگ سرد زندگي مي کرد مي دانست که شبکه سراسري تلفن آمريکا توانايي مقابله با حمله اتمي شوروي سابق را ندارد. مثلا اگر رييس جمهور وقت آمريکا حمله اتمي متقابل را دستور دهد، بايد از يک شبکه تلفني استفاده مي کرد که قبلا توسط روس ها منهدم شده بود. در نتيجه طرح يک سيستم مقاوم در مقابل حمله اتمي روس ها ريخته شد.آقاي باران (Baran) تشکيل و تکامل اينترنت را به ساخت يک کليسا تشبيه کرد و معتقد بود، طي سال هاي اخير هر کس سنگي به پايه ها و سنگ هاي قبلي بنا اضافه مي کند و انجام هر کاري وابسته به کارهاي انجام شده قبلي است. بنابراين نمي توان گفت، کدام بخش از کار مهمترين بخش کار بوده است و در کل پيدايش اينترنت نتيجه کار و تلاش گروه کثيري از دانشمندان است. داستان پيدايش اينترنت با افسانه و واقعيت در هم آميخته شده است.

ولي آقاي باران (Baran) بنابر دلايلي حاضر با همکاري با نيروي هوايي آمريکا نشد. در اين ميان دانشمندي با نام تيلور (Tailon) وارد موسسه آرپا (ARPA) شد. او مستقيما به آقاي هرتسفلد رييس موسسه پيشنهاد کرد: (ARPA) آرپا هزينه ايجاد يک شبکه آزمايشي کوچک با حداقل چهار گره را تامين کند که بودجه آن بالغ بر يک ميليون دلار مي شد. با اين پيشنهاد تيلور تجربه اي را آغاز کرد که منجر به پيدايش اينترنت امروزي شد. او موفق شد در سال، دو کامپيوتر را در شرق و غرب آمريکا به هم متصل کند. با اين اتصال انقلابي در نحوه صدور اطلاعات در دنياي ارتباطات رخ داد که نتيجه آن را امروز همگي شاهد هستيم. اين شبکه به بسته هايي (packet) از داده ها که به وسيله کامپيوترهاي مختلف ارسال مي شدند اتکا داشت. پس از انکه ازمايشها سودمندي انرا مشخص کردند ساير بخش هاي دولتي و دانشگاهها پژوهشي تمايل خود را به وصل شدن به ان اعلام کردند . ارتباطات الکترونيکي به صورت روشي موثر براي دانشمندان و ديگران به منظور استفاده مشترک از داده ها در امد. در همان زمان که ARPAnet در حال رشد بود تعدادي شبکه پوشش محلي (LAN) در نقاط مختلف آمريکا به وجود امد. مديران LANها نيز به وصل کردن کامپيوترهاي شبکه هاي خود به شبکه هاي بزرگتر اقدام کردند . پروتوکل اينترنت ARPAnet IP زبان استاندارد حکمفرما براي برقراري ارتباط کامپيوترهاي شبکه هاي مختلف به يکديگر شد.تاريخ تولد اينترنت به طور رسمي اول سپتامبر ???? اعلام شده است. زيرا که اولين “IMP” در دانشگاه “UCLA” واقع در سانتاباربارا در اين تاريخ بارگذاري شده است.

از اوايل دهه ???? رشد استفاده از اينترنت به صورت تصاعدي افزايش يافت . يکي از علل چنين استقبالي ابزار جستجويي مانند Gopher و archie بوده است اما اينها در سال ???? تحت تاثير word wide web قرار گرفتند که به وسيله CERN يا ازمايشگاه فيزيک هسته اي اروپا ساخته شد . با ان که اينترنت از ابتدا طوري بود که مبادله اطلاعات براي تازه واردان بسيار ساده باشد. بزرگترين جهش در وب در سال ???? با عرضه نرم افزار موزاييک mosaic که نخستين برنامه مرورگر وب گرافيکي بود به وجود امد. برنامه موزاييک محصول تلاش دانشجويان و استادان بخش "مرکز ملي کاربردهاي ابر کامپيوتر " در دانشگاه ايلينويز آمريکا بود. براي نخستين بار موزاييک امکانات اشاره و کليک (به وسيله موش) را فراهم کرد. کاربران مي توانستند صفحات وب (web page) يا مجموعه اي از متن و گرافيک را کنار هم بگذارند تا هر کسي که ميخواست انها را بتواند روي اينترنت ببيند. وقتي با موش روي کلمه ها يا تصاوير خاصي که hyper link ناميده مي شد کليک مي کردند برنامه موزاييک به طور خود کار يک صفحه ديگر باز مي کرد که به کلمه يا تصوير خاص و کليک شده اختصاص داشت. بهترين بخش اين سيستم انجا بود که hyper linkها مي توانستند به صفحاتي روي همان کامپيوتر يا هر کامپيوتر ديگر اينترنت با خدمات وب اشاره کنند. صفحات وب هر روز متولد مي شدند و مفهوم موج سواري يا surfing روي وب متولد شد. اواسط سال ???? سه ميليون کامپيوتر به اينترنت وصل شده بود و در ان هنگام اجراي عمليات اهسته نشده بود. صفحات جديد وب که شامل همه چيز از اسناد دولتي تا مدارک شرکت ها و مدل هاي جديد لباس بود در سراسر دنيا چندين برابر شد . موزاييک و جانشينان ان مانند navigator محصول شرکت " نت اسکيپ " اينترنت را از قلمرو علمي به ميان مردم اوردند. طبق اخرين امار ?? درصد کاربران بعد از سال ???? وارد اين محيط شده اند. ميليون ها انساني که از اينترنت استفاده مي کنند نيازي ندارند که نکات فني مانند TCP/IP را بدانند . امروزه شرکتهاي خدمات دهنده اينترنت يا ISP اين کار را به عهده دارند.رشد روز افزون ان و ساده تر شدن استفاده ان همچنان ادامه دارد . هر چه تعداد مردم بيشتري به اينترنت رجوع کنند تعداد شرکت هاي سازنده برنامه هاي اينترنت بيشتر مي شود.با انکه بعضي از عاشقان اينترنت ان را نوعي شيوه زندگي مي دانند. در نظر بيشتر کاربران منبع سرگرمي اطلاعات است ولي بيشترين مصرف ان پست الکترونيکي يا همان email است که يکي از ابزارهاي ارتباطي کار امد به شمار مي رود. پيامها از کامپيوتري به کامپيوتر ديگر با سرعت پرواز مي کنند و منتظر ميمانند تا شخص فرصت خواندن انها را پيدا کند . وب امکانات خوبي براي کپي از نرم افزارهاي مجاز از لحاظ کپي فراهم ميسازد. وقتي که مي بينيم که در مدت کوتاهي اينترنت به چنين رشدي نايل آمده است، مطمئنا دشوار خواهد بود که آينده او را پيش بيني کنيم. طبق نظر کارشناسان ماهانه ?? درصد به تعداد کاربران اينترنت افزوده مي شود ولي تعداد دقيق کاربران که روزانه از آن استفاده مي کنند مشخص نيست. هرچند که پاره اي از کارشناسان تعداد آنها را تا ميليون نفر حدس مي زنند. تعداد رسمي کاربران اينترنتي را در سال ???? کارشناسان ميليون نفر اعلام کرده بودند. طراحی وب سایت 

قطعا در سال هاي آينده تحولات شگرفي را در زمينه شبکه هاي اينترنتي شاهد خواهيم بود. به وسيله اينترنت انسان به راه هاي جديدي دست پيدا کرد. در کنار اين شانس جديد توسط اينترنت، بايد بگوييم خطراتي نيز در رابطه با سياست و اقتصاد و علم به دنبال خواهد داشت. فرم امروزي اينترنت مديون همکاري تمام کاربران اينترنت در سرتاسر گيتي است که با اين تصور که اطلاعات موجود در سطح جهان را به راحتي با يکديگر مبادله کنند. اين تصوري بود که آقاي باران(Baran) از اينترنت داشت و اميدواريم در آينده نيز تکامل اينترنت در اين مسير باشد.

 

 

ترسيمي از وب گاه هايي که تنها  از فضاي WWWشبکه جهاني اينترنت را به خود اختصاص داده اند ولي اکثر ترافيک کل شبکه اينترنت را در خود جاي داده اند.

يکي از پرسرعت ترين اينترنت ها فن آوا ميباشد fanava.ir

 

 

کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟

 

وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :

  

h2 

{

color: blue;

 font-size: medium;

 font-weight: normal;

} 

h1, h2, h3 

{

 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

 background-color: navy;

color: white;

}

 

در دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي براي آن سفيد خواهد بود. مهم نيست که در دستورات قبلي  100 بار رنگ آبي به h2 نسبت داده شود پرا که آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي دهد. 

 

استايل دهي به لينک ها:

 

لينک ها در سراسر دنياي وب وجود دارند، اگر به لينک هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم که لينک ها داراي يک خط در زير نوشته لينک (underline)  هستند. به صورت پيش فرض مرورگرها از رنگ هاي زير براي لينک ها استفاده مي کنند:

آبي :    لينکي که مشاهده نشده باشد.

بنفش :  لينکي که شما آن را قبلا مشاهده کرده ايد.

قرمز:   لينکي که فعال است و شما در حال کليک کردن بر روي آن هستيد.

در بيشتر مواقع استايل دهي به لينک ها ممکن است به شکل زير باشد:

 

A

 {

 font-weight: bold;

 color: black;

}

 

با اين دستور به جاي اينکه لينک هاي آبي رنگ با سايز فونت نرمال داشته باشيم، لينک هاي شما به رنگ آبي و ضخيم خواهد بود. 

 

 

همانطور که قبلا اشاره کرديم تا کنون يک نوع حالت براي لينک ها معرفي کرديم، لينک هاي مشاهده شده، لينک هاي فعال و لينک هايي که هنوز بر روي آنها کليک نشده است، اما نوع چهارمي وجود دارد که hover ناميده مي شود، اين حالت براي وقتي است که نشانه گر موس بر روي لينک مي آيد که با استايل دهي در css نيز ميتوان خصوصيات اين لينک را نيز تغيير داد.

در اينجا به برخي از استايل هايي که مي توان به لينک ها داد نگاهي مي اندازيم:

 

a {

 font-weight: bold;

 }

 a:link {

 color: black;

}

a:visited {

 color: gray;

}

a:hover {

 text-decoration: none;

 color: white;

 background-color: navy;

}

a:active {

 color: aqua;

 background-color: navy;

}

 

 

 

  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.

 

پاک کردن پيشينه مرورگر:

ن صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:

در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.

 

 

 

ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به history  آنها نيز به صورت زير است:

 

Tools > Options يا   Preferences > Privacy

 

 

کلاس هاي انتخابگر  :

 

تا اينجا ياد گرفتيم که چگونه در يک فايل CSS خصوصيات مختلفي براي تگها بنويسيم و آموختيم که ميتوان خصوصيات يک کلاس را براي تگهاي مختلفي اعمال کرد يعني ميتوان کلاس را چندين بار استفاده کرد. به عنوان مثال بياييد کلاس زير را دريک پاراگراف اعمال کنيم :

 

.fun {

color: #339999;

font-family: Georgia, Times, serif;

letter-spacing: 0.05em;

}

 

به اين ترتيب 3 خصوصيت براي پاراگرافمان تعريف کرده ايم،که خصوصيت سوم letter-spacing  به معناي اينست که فاصله بين کلمات موجود درمتن 0.05em باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگيريد 5% اين مقدار برابر با 0.05em خواهد بود).

حال براي اين که اين خصوصيات که در css نوشتيم برروي پاراگراف مدنظر اعمال شود کافيست که نام کلاس موجود در css رابه تگ مورد نظ مان درصفحه html نسبت دهيم:

 

<p class="fun">

A man walks into a bar; you would've thought he'd see it coming!

</p>

 

حال در نظربگيريد تگ  <blockquote>درون صفحه html تان وجود دارد و درون اين تگ ميخواهيد يک پاراگراف قرار دهيد که کلاس fun داشته باشد ، همانند کد زير:

 

<blockquote>

<p class="fun">

    Happiness is a dip in the ocean followed by a

    int or two of Old Speckled Hen. You can quote me on that!"

</p>

</blockquote>

 

به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه کارميتوان کرد؟ ميتوان راه حل زير را اعمال کرد:

 

<blockquote>

<p class="fun">"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

<p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :

 

<blockquote class="fun">

<p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

<p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

<p>"Anyway, about time I got on with some <em>proper</em> work!" </p>

</blockquote>

 

ID & CLASS

 

ياد گرفتيد که چگونه ميتوان از ID  و کلاس براي تگهاي موجود در HTML خود استفاده نماييد ، به عنوان مثال براي کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فايل سي اس اس استفاده مي کنيم و براي ID از نماد "#" . 

نکته از مترجم : دقت نماييد براي استايل دهي هم از کلاس استفاه ميشود و هم از ID. اما تفاوت هايي هم در استفاده دارد وآن اينکه از ID  براي استايل دهي و مشخص کردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميکنيم و يا براي استفاده در موارد برنامه نويسي .

تنها نکته در اين باره اين است که در يک صفحه HTML از نام يک ID  فقط مي شود يکبار استفاده نمود اما از نام يک کلاس مي توان به هر تعداد استفاده کرد.

 

در نظر بگيريد براي چند تگ درون صفحه تان از يک کلاس يکسان استفاده کرده ايد، مثلا:

 

.fun {

font-family: Georgia, Times, serif;

color: #339999;

letter-spacing: 0.05em;

}

 

اما براي يکي از تگ ها علاوه بر خصوصيات فوق يک يا چند خصيصه ديگر نيز اضافه کنيد، به اين روش اين کار را انجام مي دهيم:

 

blockquote.fun {

font-style: italic;

}

 

بدين ترتيب چنانچه کلاس fun درون تگ  blockquote قرار گيرد خصوصيت italic  را نيز مي خواند ، اما اگر به ساير تگ هايي که مي خواهيم تنها کلاس fun را بخوانند تگ blockquote را قرار ندهيم خصيصه italic  شدن فونت اعمال نمي شود.

 

براي روشن تر شدن اين موضوع مثال ديگري مي زنم:

فرض کنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين کافيست که در CSS بنويسيم : 

 

p {

color: navy;

}

 

اما حالا اگر بخواهيم يکي از متون قرار گرفته درون تگ p مان به رنگ ديگري درآيد کافيست ، به اين تگ p يه کلاس بدهيم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهيم:

 

.p.gre {

color: green;

}

 

استايل دهي قسمتي از متن با استفاده از span  :

 

فرض کنيد که چنين متني داريد:

 

<p>Bubble Underis a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

 

onths when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

.blue

{

Color: # a3c2fa;

}

 

 

قبل از شروع کار، ابتدا براي ايجاد تغيير در ظاهر و اندازه عناصر در وب سايت مي بايست با مفهوم block-level elements  و inline elements آشنا شويد.

 

block-level elements  و inline elements

 

 

block-level elements:  به عناصر يا تگ هايي مي گوييم که توسط آن مي توان کل سطر يا فضايي که آن عنصر در اختيار خود دارد را  مسدود يا به اصطلاح block کرد، هر عنصر block  مي تواند درون خود عنصر و يا عناصر inline و يا block  را جاي دهد.

 

inline elements : به عناصر يا تگ هايي مي گويند که آنها تنها مي توانند به اندازه متني که درون آن جاي گرفته قسمتي از سطر را اشغال نمايند، اين عناصر خطي يا به اصطلاح inline ناميده مي شوند، توجه داشته باشيد که درون تگ هاي inline تنها عنصر Inline جاي ميگيرد.

نحوه تشخيص عناصر  inline  بدين صورت است که اگر عنصري دوم در کنار عنصر اول در امتداد يک خط قرار گيرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد عنصر دوم در بالا يا پايين عنصر اول قرار خواهد گرفت و نه در امتداد عنصر اول.

 

در اينجا چند عنصر block را معرفي مي کنيم:

 

تگ هاي h1, h2,...و h6

P

div

Blockquote

Ul  و  ol

Form

 

وقتي که شما يک پاراگراف ايجاد مي کنيد، نيازي نيست که بعد از پايان پاراگراف اول با استفاده از <br /> به خط بعد برويد تنها کافيست يک تگ<p> را باز کرده متن خود را بنويسيد و سپس آن تگ را ببنديد.</p>

بذين ترتيب چون تگ p بلاک است خود به خود متني که در تگ دوم P  قرار مي گيرد از ابتداي سطر بعد شروع مي شود.

 

 

و خروجي آن را بدين صورت خواهيم داشت:

 

 

 

در هر جاي کامپيوتر که دوست داريد فلدري به نام my-first-webpage  بسازيد.

 

textEditor خودتان را که در جلسات قبل توضيح داديم باز کنيد کد زير را در آن کپي کنيد

 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>The Most Basic Web Page in the World</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>The Most Basic Web Page in the World</h1>

    <p>This is a very simple web page to get you started.

    Hopefully you will get to see how the markup that drives

    the page relates to the end result that you can see on

    screen.</p>

    <p>This is another paragraph, by the way. Just to show how it

    works.</p>

    </body>

    </html>

 

 

 

از textEditor گزينه file>save as را بزنيد پنجره اي مانند زير نمايش مي يابد:

 

design-web-15.gif 

 

مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.

 

 

نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html

 

 

از منوي کشويي save as type گزينه all files را انتخاب نماييد

 

حالا در فلدر مورد نظر فايلتان را با مرورگر باز نماييد . تبريک شما اولين صفحه وب خودتان را ساختيد!

 

 

 

design-web-16.gif 

اهميت UTF-8

 

 

اين کاراکتر ست (Character Set) اجازه مي دهد زبان هاي ديگر هم بتوانند به درستي صفحه شما را ببينند. فرض کنيد يک کاربر کره اي که زبان انگليسي ندارد بخواهد صفحه شما را ببيند ، اين کاراکتر ست است که اجازه ميدهد شما با مشکلي مواجه نشويد.

 

 

اولين آناليز شما

 

 

يک مقايسه و يک آناليز ساده بين کد شما و ظاهري که در مرورگر مي بينيد ، مي تواند در يادگيري شما کمک شاياني کند:

 

 

 

design-web-17.gif 

زمان مناسبي است که در مورد 2 تگ p  و h1 و البته عناصر ديگر صحبت کنيم.

 

 

تيترها و سلسله مراتب آن (H)

 

 

 

تيترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1  تا h6  وجود دارند.

از h1  براي مهم ترين تيتر از h2 براي تيتر کم  ارزش تر و از h3 براي تيتر کم ارزش تر از h2 و به همين ترتيب تا  h6

 

 

پاراگراف (p)

 

 

 

يک تگ بلاک و بسته شونده (container) است و براي يک بلوک متني استفاده مي شود اين بدان معني است که متن هاي خوتان را بايد داخل اين تگ قرار دهيد.

 

 

ليست (list)

 

 

 

فرض کنيد مي خواهيد ليست وب سايت هاي طراحي شده خودتان را نمايش دهيد ، به ليستي که من درسايت خودم استفاده کردم  يک سري بزنيد.

اينجا:

 

 

 

design-web-18.jpgو اما ليست ها دو گونه اند:

 

 

Ol-order list : براي ليست هاي ترتيبي

 

 

Ul-unorder list: براي ليستهاي غير ترتيبي

 

به مثال زير دقت کنيد:

 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Lists - an introduction</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>Lists - an introduction </h1>

    <p>Here's a paragraph. A lovely, concise little paragraph.</p>

    <p>Here comes another one, followed by a subheading.</p>

    <h2>A subheading here</h2>

    <p>And now for a list or two:</p>

    <ul>

    <li>This is a bulleted list</li>

    <li>No order applied</li>

    <li>Just a bunch of points we want to make</li>

    </ul>

    <p>And here's an ordered list:</p>

    <ol>

    <li>This is the first item</li>

    <li>Followed by this one</li>

    <li>And one more for luck</li>

    </ol>

    </body>

    </html>

 

و حالا خروجي کار رو در مرورگر ببينيد تا تفاوت هاي دو نوع ليست را ببينيد

 

design-web-19.gif

 

 ظاهر همه ليست ها به همين سادگي نيستند و امروزه در طراحي وب سايت حرفه اي استفاده زيادي دارد. براي نمونه مي توانيد به فوتر وب سايت شرکت طراحي سايت وب اسکالا نگاهي بياندازيد تا ديدتان نسبت به استفاده از اين عنصر بازتر شود.

 

در هر جاي کامپيوتر که دوست داريد فلدري به نام my-first-webpage  بسازيد.

 

textEditor خودتان را که در جلسات قبل توضيح داديم باز کنيد کد زير را در آن کپي کنيد

 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>The Most Basic Web Page in the World</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>The Most Basic Web Page in the World</h1>

    <p>This is a very simple web page to get you started.

    Hopefully you will get to see how the markup that drives

    the page relates to the end result that you can see on

    screen.</p>

    <p>This is another paragraph, by the way. Just to show how it

    works.</p>

    </body>

    </html>

 

 

 

از textEditor گزينه file>save as را بزنيد پنجره اي مانند زير نمايش مي يابد:

 

design-web-15.gif 

 

مسير فلدر قبل را بدهيد تا در آنجا ذخيره شود.

 

 

نام فايل را انتخاب نماييد البته با پسوند html مانند my-first-webpage.html

 

 

از منوي کشويي save as type گزينه all files را انتخاب نماييد

 

 

از منوي کشويي Encoding گزينه UTF-8 را انتخاب نماييد.

 

و حالا دکمه save را بزنيد.

 

design-web-16.gif 

اهميت UTF-8

 

 

اين کاراکتر ست (Character Set) اجازه مي دهد زبان هاي ديگر هم بتوانند به درستي صفحه شما را ببينند. فرض کنيد يک کاربر کره اي که زبان انگليسي ندارد بخواهد صفحه شما را ببيند ، اين کاراکتر ست است که اجازه ميدهد شما با مشکلي مواجه نشويد.

 

 

اولين آناليز شما

 

 

يک مقايسه و يک آناليز ساده بين کد شما و ظاهري که در مرورگر مي بينيد ، مي تواند در يادگيري شما کمک شاياني کند:

 

 

 

design-web-17.gif 

زمان مناسبي است که در مورد 2 تگ p  و h1 و البته عناصر ديگر صحبت کنيم.

 

 

تيترها و سلسله مراتب آن (H)

 

 

 

تيترها عناصر بلاک و بسته شونده (container)هستند و سلسله مراتب مخصوص به خود را دارند و از h1  تا h6  وجود دارند.

از h1  براي مهم ترين تيتر از h2 براي تيتر کم  ارزش تر و از h3 براي تيتر کم ارزش تر از h2 و به همين ترتيب تا  h6

 

 

پاراگراف (p)

 

 

 

يک تگ بلاک و بسته شونده (container) است و براي يک بلوک متني استفاده مي شود اين بدان معني است که متن هاي خوتان را بايد داخل اين تگ قرار دهيد.

 

 

ليست (list)

 

 

 

فرض کنيد مي خواهيد ليست وب سايت هاي طراحي شده خودتان را نمايش دهيد ، به ليستي که من درسايت خودم استفاده کردم  يک سري بزنيد.

اينجا:

 

 

 

design-web-18.jpgو اما ليست ها دو گونه اند:

 

 

Ol-order list : براي ليست هاي ترتيبي

 

 

Ul-unorder list: براي ليستهاي غير ترتيبي

 

به مثال زير دقت کنيد:

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Lists - an introduction</title>

    <meta http-equiv="Content-Type"

    content="text/html; charset=utf-8"/>

    </head>

    <body>

    <h1>Lists - an introduction </h1>

    <p>Here's a paragraph. A lovely, concise little paragraph.</p>

    <p>Here comes another one, followed by a subheading.</p>

    <h2>A subheading here</h2>

    <p>And now for a list or two:</p>

    <ul>

    <li>This is a bulleted list</li>

    <li>No order applied</li>

    <li>Just a bunch of points we want to make</li>

    </ul>

    <p>And here's an ordered list:</p>

    <ol>

    <li>This is the first item</li>

    <li>Followed by this one</li>

    <li>And one more for luck</li>

    </ol>

    </body>

    </html>

 

 

دو نمونه از پر استفاده ترين ليستها در HTML ليستهاي مرتب و ليستهاي نامرتب هستند. در ليستهاي مرتب ترتيب بخشهاي مختلف ليست مشخص مي شود ولي در ليستهاي نامرتب اين ترتيب مشخص نمي شود

 

ليستهاي نامرتب

در ليستهاي نامرتب براي عناصر ليست از شماره و عدد يا حروف الفبا استفاده نمي شود. عناصر اين معمولاً با يک دايره تو پر مشخص مي شوند. تگ ابتداي آن <ul> است و تگ پاياني آن <ul/> است. براي جدا کردن هر بخش ليست در ابتداي آن از تگ <li> استفاده مي شود. بهتر است هر تگ <li> که باز مي شود با <li/> بسته شود. در زير يک مثال براي اين نوع ليست آورده شده است:

 

<ul>

<li>بخش اول ليست</li>

<li>بخش دوم ليست</li>

<li>بخش سوم ليست</li>

</ul>

مثال بالا يک ليست بولت دار با سه بخش را به ما مي دهد:

 

بخش اول ليست

بخش دوم ليست

بخش سوم ليست

به اين نکته هم توجه کنيد که <li> نيازي به تگ پاياني ندارد ولي بهتر است از تگ پاياني آن يعني <li/> استفاده شود.. فاصله متن ليست شده از ابتداي خط هم مقداري از بقيه متن بيشتر مي شود. شما مي توانيد اين فاصله را با افزودن تگ <ul> بيشتر کنيد فقط به خاطر داشته باشيد تگهايي را که باز کرده ايد در آخر ليست ببنديد.در زير يک مثال براي اين نمونه ليست آورده شده است:

 

<ul>

<ul>

<ul>

<li>خط اول ليست</li>

<li>خط دوم ليست</li>

<li>خط سوم ليست</li>

</ul>

</ul>

</ul>

نتيجه اين فرمان به شکل زير خواهد بود:

 

خط اول ليست

خط دوم ليست

خط سوم ليست

از شناسه type مي توان در تگ <ul> استفاده کرد و ظاهر ليست را تغيير داد.

 

مي توانيد ليست به دست آمده را در اينجا مشاهده کنيد. به خاطر داشته باشيد که در مرورگرهاي مختلف ممکن است نحوه نمايش ليستها متفاوت باشد.

 

قسمت اول ليست

قسمت دوم ليست

قسمت سوم ليست

اگر مي خواهيد از تگ <center> براي ليست خود استفاده کنيد در اين کار دقت کنيد. چون ممکن است تمام سطرهاي متن شما به يک اندازه نباشند. در اين صورت به جاي اينکه ليستي در يک خط و مستقيم داشته باشيد ممکن است ليستي در هم ريخته و شلوغ به وجود آيد. مانند زير:

 

<center>

<ul>

<li>بخش اول ليست که بلندتر از بقيه سطرهاي ليست است</li>

<li>بخش دوم ليست</li>

<li>بخش سوم ليست در سطر آخر</li>

</ul>

<center>

ليست نهايي به اين صورت در صفحه ديده مي شود.

 

بخش اول ليست که بلندتر از بقيه سطرهاي ليست است

بخش دوم ليست

بخش سوم ليست در سطر آخر

اگر شما در يک صفحه بيشتر به ليستها نياز داريد مي توانيد از روش بالا استفاده کنيد اما بايد بدانيد که ممکن است ظاهر ليست در اندازه هاي مختلف پنجره مرورگر به هم بخورد. راه ديگري که براي جلوگيري از اين به هم خوردگي وجود دارد استفاده از يک Table است که بعداً در مورد آن توضيح خواهيم داد.